﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<!-- source http://www.scnoob.com More templates http://www.scnoob.com/moban -->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>商品下单</title>

    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/bootstrap.min.css}">

    <link rel="stylesheet" type="text/css" th:href="@{/assets/fonts/line-icons.css}">

    <link rel="stylesheet" th:href="@{/assets/plugins/morris/morris.css}">

    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/icons.css}">

    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/main.css}">

    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/responsive.css}">
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/ordergenerateStyles.css}">
    <base th:href="@{/}">
</head>
<body>
<div class="app header-default side-nav-dark">
    <div class="layout">
        <div class="header navbar">
            <div class="header-container">
                <ul class="nav-left">
                    <li>
                        <a href="javascript:history.back(-1);">
                            <i class="lni-chevron-left" style="border: transparent;"></i>
                        </a>
                    </li>
                </ul>
                <p class="text-center d-inline-block phoneNum-title" style="margin-top: 20px">
                    <b>填写订单</b>
                </p>
                <ul class="nav-right" style="margin-right: 20px;">
                    <li class="user-profile dropdown dropdown-animated scale-left">
                        <a th:href="@{/front/user/userPath(referId=${referId})}">
                            我的
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="footer navbar" style="border-top: 1px solid #f6f6f6;">
            <div class="footer-container">
                <ul class="nav-left">
                    <li class="user-profile dropdown dropdown-animated scale-left">
                        <p class="bar-vertical-center">
                            <span>共计：</span>
                            <span id="payMoney" class="t-color-danger" style="font-size: 1.5rem"
                                  th:text="${order.payMoney}"></span>
                            <span class="pl-2 t-color-danger">RMB</span>
                        </p>
                    </li>
                </ul>
                <ul class="nav-right" style="margin-right: 20px;">
                    <li class="user-profile dropdown dropdown-animated scale-left">
                        <a>
                            <button type="button" onclick="orderCommit()" class="btn btn-danger btn-rounded"
                                    style="padding: 10px 15px;">
                                <span>提交订单</span>
                            </button>
                        </a>
                        <div id="commitNum" style="display: none" text="0"></div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="page-container" style="padding: 64px 0 65px 0!important;background-color: #f1f2f7;">
            <div class="article-clean " style="height: 100%">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-10 col-xl-8 offset-lg-1 offset-xl-2 p-0">
                            <div class="intro" style="padding: 10px">
                                <!--                                商品信息-->
                                <div class="card card-body"
                                     style="border-radius: 10px;width: 100%;margin-bottom: 10px">
                                    <div class="row align-items-center">
                                        <div class="col-md-4 col-lg-3">
                                            <!--主要内容-->
                                            <div class="ordergenerate-center">
                                                <div style="display: none" th:text="${product.id}" id="productId"></div>
                                                <div style="display: none" th:text="${session.userEntity.id}"
                                                     id="userId"></div>
                                                <div style="display: none" th:text="${session.userEntity.referId}"
                                                     id="referId"></div>
                                                <!--    商品-->
                                                <div class="ordergenerate-center-good">
                                                    <div class="ordergenerate-center-good-title "
                                                         th:text="${order.productEntityName}"></div>
                                                    <div class="col-md-8 col-lg-9 text-center">
                                                        <img th:if="${product.image.indexOf(';')>0}"
                                                             th:src="${#strings.substringBefore(product.image,';')}"
                                                             alt="productInfo"
                                                             class="img-circle img-fluid">
                                                        <img th:unless="${product.image.indexOf(';')>0}"
                                                             th:src="${product.image}" alt="productInfo"
                                                             class="img-circle img-fluid">
                                                    </div>
                                                    <div style="vertical-align: middle;">
                                                        <div class="ordergenerate-center-good-box001 ">
                                                            <div class="ordergenerate-center-good-sum">
                                                                <div class="ordergenerate-center-good-sum-text">￥</div>
                                                                <div class="ordergenerate-center-good-sum-text"
                                                                     th:text="${product.price}"></div>
                                                                <div class="ordergenerate-center-good-sum-text">/件</div>
                                                            </div>
                                                            <div class="ordergenerate-center-good-sum">
                                                                <div class="ordergenerate-center-good-sum-text">共</div>
                                                                <div class="ordergenerate-center-good-sum-text"
                                                                     id="totalNum"
                                                                     th:text="${order.totalNum}"></div>
                                                                <div class="ordergenerate-center-good-sum-text">件商品
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <!--    选择收货地址-->
                                <div class="card" style="width: 100%;border-radius: 10px;padding-bottom: 25px">
                                    <div style="width: 99%;height: 55px;">
                                        <div class="ordergenerate-center-good-sum-text002"
                                             style="width: 99%;text-align: center">
                                            选择收货地址
                                        </div>
                                        <div style="width: 99% ;float: left;margin-bottom: 10px">
                                            <a style="float:right;margin:0 10px 0 0;border-radius: 25px"
                                               id="addressOption"
                                               th:href="@{/front/addressPhone/findAddressAll(userId=${session.userEntity.id},productId=${order.productId},totalNum=${order.totalNum})}">
                                                <span style="width: 20%">&nbsp;>>其他地址</span></a>
                                            <a style="float:right;margin: 0 10px 0 0"
                                               th:href="@{/front/addressPhone/addressGenerate(productId=${order.productId},totalNum=${order.totalNum})}">
                                                <span style="width: 20%">+&nbsp;新建收货地址</span></a>
                                        </div>
                                    </div>

                                    <div style="width: 100%;border-radius: 10px;margin-top: 10px" id="addressNull">
                                        <div class="ordergenerate-center-good-sum-text003" id="address" type="text"
                                             placeholder="收货地址"></div>
                                        <div style="width: 100%">
                                            <div class="ordergenerate-center-good-sum-text001" id="username" type="text"
                                                 placeholder="收货人"></div>
                                            <div class="ordergenerate-center-good-sum-text001" id="phoneNum" type="text"
                                                 placeholder="电话号码"></div>
                                        </div>
                                    </div>
                                </div>

                                <div id="tips" style="color: red" class="ordergenerate-center-good-sum-text"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<div id="preloader">
    <div class="loader" id="loader-1"></div>
</div>

<script th:src="@{/assets/js/jquery-min.js}"></script>
<script th:src="@{/assets/js/popper.min.js}"></script>
<script th:src="@{/assets/js/bootstrap.min.js}"></script>
<script th:src="@{/assets/js/jquery.app.js}"></script>
<script th:src="@{/assets/js/main.js}"></script>

<script th:src="@{/assets/plugins/morris/morris.min.js}"></script>
<script th:src="@{/assets/plugins/raphael/raphael-min.js}"></script>
<!--<script th:src="@{/assets/js/dashborad1.js}"></script>-->


<script type="text/javascript">
    $(function () {
        $("#tips").hide();
        // 默认地址
        findDefaultAddress();
    });

 // 查询默认地址
    function findDefaultAddress() {
        var userId = $("#userId").text();
        $.post("front/addressPhone/findDefaultAddress",
            {"userId": userId},
            function (data) {
                if (data.message != "false") {
                    console.log("默认地址不为空");
                    // 电话号码
                    $('#phoneNum').text(data.address.receiverMobile);
                    $('#phoneNum').attr("readonly", true);
                    // 用户名
                    $('#username').text(data.address.receiverContact);
                    $('#username').attr("readonly", true);
                    // 收货地址
                    $('#address').text(data.address.receiverAddress);
                    $('#address').attr("readonly", true);
                } else {
                    $("#addressNull").hide();
                    console.log("默认地址为空");
                    $("#addressOption").hide();
                }
            }
        )
    }

    // 订单提交
    function orderCommit() {
        // 电话号码
        var phoneNum = $('#phoneNum').text();
        // 用户名
        var username = $('#username').text();
        // 收货地址
        var address = $('#address').text();

        // 订单提交次数
        var commitNum = $('#commitNum').text();
        if (username == "") {
            $("#tips").text("* 请录入收货地址");
            // $("#tips").text("* 收货人不能为空");
            $("#tips").show();
            // $('#username').attr('placeholder',"用户名不能为空");
        } else if (!(/^1[345789]\d{9}$/.test(phoneNum))) {
            $("#tips").text("* 手机号码格式有误，请重填");
            $("#tips").show();
        } else if (address == "") {
            $("#tips").text("* 收货地址不能为空");
            $("#tips").show();
        } else {
            // 判断是否多次提交同一个订单
            if (commitNum == 0) {
                commitNum++;
                $('#commitNum').text(commitNum);
                var userId = $("#userId").text();
                var referId = $("#referId").text();
                var orderId = $("#orderId").text();
                $.post("front/orderPhone/orderCommit",
                    {
                        "productId": $("#productId").text(),
                        "totalNum": $("#totalNum").text(),
                        "payMoney": $("#payMoney").text(),
                        "userId": userId,
                        "receiverMobile": phoneNum,
                        "receiverContact": username,
                        "receiverAddress": address
                    },
                    function (data) {
                        if (data.result != "0") {
                            console.log(data,data.orderId,data.result);
                            window.open("/front/orderPhone/chooseAcctType?orderId=" +data.orderId +"&referId="+referId, "_self");
                        } else {
                            $("#tips").text("* 提交订单失败");
                            $("#tips").show();
                        }
                    }
                )
            } else {
                $("#tips").text("* 请勿多次提交订单");
                $("#tips").show();
            }
        }
    }
</script>
</body>

<!-- source http://www.scnoob.com More templates http://www.scnoob.com/moban -->
</html>